<template>
  <div id="road" @click="change"
    :style="log == 0 ? 'background-color:rgb(245, 245, 245)' : 'background-color: rgba(13, 13, 13, 0.8)'">实时路况</div>
</template>

<script setup>
import axios from 'axios'
import { LineLayer } from '@antv/l7'
import { ref, computed, inject, onMounted } from 'vue'
const log = ref(0);
let active = ref()

const getData = async () => {

  var res = await axios("http://localhost:8080/road")
  var road_layer2 = new LineLayer({
    name: "三环内道路2",
    zIndex: 3,
  }).source(res.data)
    // 设置道路宽度
    .size(1)
    .shape('line')
    // 设置颜色
    .color('color', (value) => {
      switch (value) {
        case 'darkgreen':
          return '#006400';
        case 'green':
          return '#7FFF00';
        case 'yellow':
          return '#FFD700';
        case 'orange':
          return '#FFA500';
        case 'red':
          return '#FF0000';
      }
    })
// //设置道路流线的效果
// .animate({
//   interval: 1, // 间隔
//   duration: 2, // 持续时间，延时
//   trailLength: 2 // 流线长度
// });
  return {road_layer2}
}
//onMounted(async () => {
//  const {scene,map} = inject("$scene_map");
// var road_res = await axios("http://localhost:8080/road")
//
//
//

//   return {road_layer2}
////
//})
//

//scene.addLayer(a);
//const a=getData()
const { scene, map } = inject("$scene_map");


var road_layer2=new LineLayer()
const change = async() => {
 
  if (log.value == 0) {
    log.value = 1
    var res = await axios("http://localhost:8080/road")
   road_layer2 =new LineLayer ({
    name: "三环内道路2",
    zIndex: 3,
  }).source(res.data)
    // 设置道路宽度
    .size(2)
    .shape('line')
    // 设置颜色
    .color('color', (value) => {
      switch (value) {
        case 'darkgreen':
          return '#006400';
        case 'green':
          return '#7FFF00';
        case 'yellow':
          return '#FFD700';
        case 'orange':
          return '#FFA500';
        case 'red':
          return '#FF0000';
      }
    })
    scene.addLayer(road_layer2)
    //scene.setMapStyle('normal')
  } else {
    log.value = 0
    
    scene.removeLayer(road_layer2)
    //const { scene, map } = inject("$scene_map");
    //scene.removeLayer(road_layer2)
  }


}


</script>
<style scoped>
#road {
  height: 100%;
  width: 150px;
  font-size: 25px;
  color: grey;
  line-height: 80px;
  border-left: 1px solid;
  border-color: gray;
  padding-left: 7px;
  padding-right: 7px;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-left: 30px;
}
</style>